import {Modal, Descriptions, Button, QRCode, Divider} from 'antd';
import {connect} from 'umi';
import {polypayH5Host} from '@/requestErrorConfig';

const Detail = (props) => {
  const {detail, setDetail} = props.data;

  /* 取消操作 */
  function onCancel() {
    setDetail(undefined);
  }

  /* 下载聚合支付二维码 */
  function downPolypayCode() {
    const canvas = document.getElementById('polypay')?.querySelector('canvas');
    if (canvas) {
      const url = canvas.toDataURL();
      const a = document.createElement('a');
      a.download = `${detail.data.name}.png`;
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }

  return (
    <Modal
      title={detail ? detail.title : ''}
      open={detail ? detail.visible : false}
      footer={null}
      onCancel={onCancel}
      forceRender={true}
      width={900}
      bodyStyle={{
        paddingTop: 24,
        maxHeight: 480,
        overflowY: 'auto',
        overflowX: 'hidden',
      }}
    >
      {detail && detail.data && (
        <>
          <Descriptions bordered column={2} size={'small'} labelStyle={{textAlign: 'right'}}>
            <Descriptions.Item label="商家名称">
              {detail.data?.name}
            </Descriptions.Item>
            <Descriptions.Item label="商家简称">
              {detail.data?.abbrevia}
            </Descriptions.Item>
            <Descriptions.Item label="商家编号">
              {detail.data?.code}
            </Descriptions.Item>
            <Descriptions.Item label="到期日期">
              {detail.data.expiredDate ?? '永久有效'}
            </Descriptions.Item>
            <Descriptions.Item label="营业说明">
              {detail.data.busiDesc ? detail.data.busiDesc : '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="营业状态">
              {detail.data.busiStatus === 1 ? '正常' : '休息'}
            </Descriptions.Item>
            <Descriptions.Item label="联系人手机">
              {detail.data.contactMobile ? detail.data.contactMobile : '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="联系人姓名">
              {detail.data.contactName ? detail.data.contactName : '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="联系人邮箱">
              {detail.data.contactEmail ? detail.data.contactEmail : '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="备注信息">
              {detail.data.remark ? detail.data.remark : '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="当前状态">
              {detail.data.status === 1 ? '正常' : '停用'}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {detail.data.createTime ?? '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="所在区县">
              {detail.data.regionName ? detail.data.regionName : '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="客服电话">
              {detail.data.serviceTel ? detail.data.serviceTel : '暂无'}
            </Descriptions.Item>
            <Descriptions.Item label="详细地址">
              {detail.data.address ? detail.data.address : '暂无'}
            </Descriptions.Item>
          </Descriptions>

          <Divider/>

          <div style={{display: 'flex', marginTop: 24}}>
            <div id={'polypay'} style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
              <QRCode
                value={`${polypayH5Host}/polypay/open/${detail.data.code}`}
                bgColor="#fff"
                style={{
                  marginBottom: 8,
                }}
              />
              <Button type="primary" onClick={downPolypayCode}>
                下载聚合支付二维码
              </Button>
            </div>
          </div>
        </>
      )}

    </Modal>
  );
};


export default connect(({}) => {
  return {};
})(Detail);

